<!-- 研究生排课课表 -->
<template>
  <div class="edu-timetable">
    <table>
      <tr style="background:#fff">
        <td class="td-head">{{$t('arrangement.timesAndWeek')}}</td>
        <td class="td-head">{{$t('common.week.1')}}</td>
        <td class="td-head">{{$t('common.week.2')}}</td>
        <td class="td-head">{{$t('common.week.3')}}</td>
        <td class="td-head">{{$t('common.week.4')}}</td>
        <td class="td-head">{{$t('common.week.5')}}</td>
        <td class="td-head">{{$t('common.week.6')}}</td>
        <td class="td-head">{{$t('common.week.7')}}</td>
      </tr>
      <tr v-for="(row,index) in rows" :key="index">
        <td
          class="edu-td-time"
          :class="{
              'top': row.top && tableStyle==0,
              'top1': row.top && tableStyle==1,
              'bottom': row.bottom  && tableStyle==0,
              'bottom1': row.bottom  && tableStyle==1,
              'split': row.split  && tableStyle==0,
              'split1': row.split && tableStyle==1,
            }"
          :style="{
              'background-color': row.color
            }">{{$t('arrangement.lessonIndex',{index:index+1})}}</td>
        <!-- @click="cellClick(day,index+1,0,row.disable)" -->
        <td
          v-for="day in 7"
          :key="day"
          @click="cellClick(day,index+1,0,row.disable,$event)"
          @contextmenu.prevent="cellClick(day,index+1,1,row.disable,$event)"
          @dblclick="cellClick(day,index+1,2,row.disable,$event)"
          class="content"
          :class="{
              'top': row.top && tableStyle==0,
              'top1': row.top && tableStyle==1,
              'bottom': row.bottom  && tableStyle==0,
              'bottom1': row.bottom  && tableStyle==1,
              'split': row.split  && tableStyle==0,
              'split1': row.split && tableStyle==1,
              'disable': row.disable,
              'filled':datas[day-1][index]&&datas[day-1][index].value,
              'tempSava' : savedMap[day] && savedMap[day][index+1]
            }"
        >
          <template v-if="datas[day-1][index]">
            <div
              class="content content-title"
              v-if="(datas[day-1][index] instanceof Array)"
              :class="{
                    'bg-multi': multiStyle,
                    'bg-2' : (datas[day-1][index].weekConflict == true),
                    'titleSave' : savedMap[day] && savedMap[day][index+1]
                  }"
              :style="{
                    height: isSpanHeight ? (Math.max(... datas[day-1][index].map(a=>a.span))* 35)+'px' : 'auto',
                    padding: '0 3px',
                  } ">
              <i v-if="datas[day-1][index].filter(a=>a.c1).length" class="corner corner-1"></i>
              <i v-if="datas[day-1][index].filter(a=>a['c1-1']).length" class="corner corner-1-1"></i>
              <i v-if="datas[day-1][index].filter(a=>a.c2).length" class="corner corner-2"></i>
              <i v-if="datas[day-1][index].filter(a=>a.c3).length" class="corner corner-3"></i>
              <i v-if="datas[day-1][index].filter(a=>a.c4).length" class="corner corner-4"></i>
              <el-popover
                :width="popoverWidth||400"
                :title="`[${$t('common.week.'+day)} 第${index+1}节] 排课信息`"
                placement="right-start"
                trigger="hover">
                <div style="padding-top:2px;max-height:300px;overflow-y:auto">
                  <div
                    style="padding:0;font-size:12px;line-height:14px;"
                    v-for="(item,index) in datas[day-1][index]"
                    :key="index" v-html="item.popover || (item.code + item.str + item.tag)"></div>
                </div>
                <div slot="reference">
                <span
                  style="padding:2px 0 0;border-bottom:dashed 1px #bbb;"
                  v-for="(item,index) in datas[day-1][index]"
                  :key="index" v-html="item.code + item.value + item.tag"
                ></span>
                </div>
              </el-popover>
          </div>
          <div
            v-else
            class="content content-title"
            :class="{
                'bg-1': datas[day-1][index].bg1,
                'bg-2': datas[day-1][index].bg2,
                'bg-3': datas[day-1][index].bg3,
                'titleSave' : savedMap[day] && savedMap[day][index+1]
                }"
            :style="{
                height: ((datas[day-1][index].span * 35))+'px',
                padding: '3px'
              }"
             >
            <i v-if="datas[day-1][index].c1" class="corner corner-1"></i>
            <i v-else-if="datas[day-1][index]['c1-1']" class="corner corner-1-1"></i>
            <i v-if="datas[day-1][index].c2" class="corner corner-2"></i>
            <i v-if="datas[day-1][index].c3" class="corner corner-3"></i>
            <i v-if="datas[day-1][index].c4" class="corner corner-4"></i>
            <el-popover :width="popoverWidth||400"
              placement="right-start"
              trigger="hover">
              <!-- <div style="padding-top:2px;max-height:300px;overflow-y:auto">
                <div v-html="datas[day-1][index].popover || (datas[day-1][index].str+datas[day-1][index].tag)"></div>
              </div>
              <div slot="reference" v-html="datas[day-1][index].value + datas[day-1][index].tag"></div>单课程1111 -->
              <div style="padding-top:2px;max-height:300px;overflow-y:auto">
                <div v-html="datas[day-1][index].popover ||(datas[day-1][index].code +  datas[day-1][index].str)"></div>
              </div>
              <div slot="reference" v-html="datas[day-1][index].code + datas[day-1][index].value"></div>
            </el-popover>
            <!-- {{datas[day-1][index].value}} -->
          </div>
          </template>
          <div class="active" v-if="activedMap[day] && activedMap[day][index+1]" :style="{
                  height: (activedMap[day][index+1] * 35-2)+'px',
                  padding: '3px'
                }">
          </div>
          <div class="saved" v-else-if="savedMap[day] && savedMap[day][index+1]" :style="{
                  height: ((savedMap[day][index+1] * 35)-2)+'px',
                  padding: '3px'
                }">
          </div>
          <!--选中区域-->
          <div class="selected" v-else-if="selectedMap[day] && selectedMap[day][index+1]" :style="{
                  height: (selectedMap[day][index+1] * 35-2)+'px',
                  padding: '3px'
                }">
          </div>
        </td>
      </tr>
    </table>
    <br>
    <!--图例-->
    <div class="legend" v-if="legend">
      {{$t('arrangement.legend.label')}}:
      <span v-if="legend.active" class="legend-bg">
        <i
          style="border: solid 2px #E6A23C; background: rgba(64, 158, 255, 0.3);"
        >&emsp;</i>
        {{legend.active}}
      </span>
      <span v-if="legend.selected" class="legend-bg">
        <i
          style="border: dashed 1px #F56C6C; background: rgba(64, 158, 255, 0.3);"
        >&emsp;</i>
        {{legend.selected}}
      </span>
      <span v-if="legend.saved" class="legend-bg">
        <i
          style="border: solid 1px #409EFF; background: rgba(64, 158, 255, 0.3);"
        >&emsp;</i>
        {{legend.saved}}
      </span>
      <span v-if="legend.c1" class="legend-c">
        <i class="corner corner-1"></i>
        {{legend.c1}}
      </span>
      <span v-if="legend['c1-1']" class="legend-c">
        <i class="corner corner-1-1"></i>
        {{legend['c1-1']}}
      </span>
      <span v-if="legend.c2" class="legend-bg">
        <span class="legend-c">
          <i class="corner corner-2"></i>
        </span>
        {{legend.c2}}
      </span>
      <span v-if="legend.c3" class="legend-c">
        <i class="corner corner-2"></i>
        {{legend.c3}}
      </span>
      <span v-if="legend.c4" class="legend-bg">
        <span class="legend-c">
          <i class="corner corner-4"></i>
        </span>
        {{legend.c4}}
      </span>
      <span v-if="legend.bg1" class="legend-bg">
        <i class="bg-1">&emsp;</i>
        {{legend.bg1}}
      </span>
      <span v-if="legend.bg2" class="legend-bg">
        <i class="bg-2">&emsp;</i>
        {{legend.bg2}}
      </span>
      <span v-if="legend.bg3" class="legend-bg">
        <i class="bg-3">&emsp;</i>
        {{legend.bg3}}
      </span>
      <span v-if="legend.bgmul" class="legend-bg">
        <i
          style="border: 1px solid #9c9c9c;
                background:repeating-linear-gradient(135deg,#aaa -1px, #aaa 11px, #fff 0,#fff 24px )"
        >&emsp;</i>
        {{legend.bgmul}}
      </span>
      <slot name="legend"></slot>
    </div>
    <slot v-else name="legend"></slot>
  </div>
</template>
<script>
const cellHeight = 35;

export default {
  name: 'GraduateArrangeTimeTable',
  props: {
    legend: {
      type: Object,
      default: {
        active:"当前选择",
        saved: "已安排",
        selected:"已选中"
      },
    },
    classData: {
      type: Array,
      required: true,
    },
    actived: {
      type: Array,
      default: [],
    },
    saved: {
      // 已保存的选择 {"dayOfWeek":3,"timeStart":3,"timeEnd":4,"value":"张三(A) (10101)(单周null-null)"}
      type: Array,
      default: [],
    },
    selected: {
      // 正在选择的区域{"dayOfWeek":3,"timeStart":3,"timeEnd":4,"value":"张三(A) (10101)(单周null-null)"}
      type: Array,
      default: [],
    },
    times: {
      type: Number,
      default: 12,
    },
    times: {
      type: Number,
      default: 12,
    },
    timeGroup: {
      type: Array,
      default: [[1, 2, 3, 4], [5, 6, 7, 8], [9], [10, 11], [12]],
    },
    timeSplit: {
      type: Array,
      default: [0,4,8,9],
    },
    disableTime: {
      type: Array,
      default: [9, 12],
    },
    color: {
      type: Array,
      default: [
        'rgba(255,192,203,0.6)',
        'rgba(255,255,0,0.5)',
        '#C0C4CC',
        '#DCDFE6',
        '#C0C4CC',
      ],
      // default: ["#DCDFE6","#ffffff","#C0C4CC","#ffffff","#C0C4CC"]
    },
    // 0 本科生默认 1 研究生默认
    tableStyle:{
      default:0
    },
    // 是否显示多课程的间隔色块，当同时课程较多时，可以关闭
    multiStyle:{
      default: true
    },
    showConflict:{
      type:Boolean,
      default:false
    },
    popoverWidth:{
      type:Number,
      default:400
    },
    pageName: {
      default: ''
    },
    // 教室课表需要根据span设置高度
    isSpanHeight: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      selectedMap: {},
      savedMap: {}, // 已经选择的区域
      activedMap:{},
      rows: [],
      datas: [],
    }
  },
  mounted() {
    this.init()
    this.update()
    this.select()
    this.save()
    this.active()
  },
  watch: {
    classData: function() {
      this.update()
    },
    selected: function() {
      this.select()
    },
    saved: function() {
      this.save()
    },
    actived: function() {
      this.active()
    },
    disableTime: function(){
      this.init();
    },
    showConflict: function(){
      this.init();
      this.update();
    }
  },
    methods: {
      init() {
        let rows = []
        for (let i = 0; i < this.timeGroup.length; i++) {
          const group = this.timeGroup[i]
          for (let j = 0; j < group.length; j++) {
            const time = group[j]
            rows[time - 1] = {
              color: this.color[i % this.color.length],
              top: j % 2 == 0,
              bottom: j % 2 == 1 || j == group.length - 1,
              disable: this.disableTime.includes(time),
              split: this.timeSplit.includes(time)
            }
          }
        }
        this.rows = rows
      },
      select() {
        let val = this.selected
        let selectedMap = {}
        for (let i = 0; i < val.length; i++) {
          const data = val[i]
          if (!selectedMap[data.dayOfWeek]) {
            selectedMap[data.dayOfWeek] = {}
          }
          selectedMap[data.dayOfWeek][data.timeStart] =
            data.timeEnd - data.timeStart + 1
        }
        this.selectedMap = selectedMap;
      },
      save() {
        let val = this.saved
        let savedMap = {}
        for (let i = 0; i < val.length; i++) {
          const data = val[i]
          if (!savedMap[data.dayOfWeek]) {
            savedMap[data.dayOfWeek] = {}
          }
          savedMap[data.dayOfWeek][data.timeStart] =
            data.timeEnd - data.timeStart + 1
        }
        this.savedMap = savedMap;
      },
      active(){
        let val = this.actived
        let map = {}
        for (let i = 0; i < val.length; i++) {
          const data = val[i]
          if (!map[data.dayOfWeek]) {
            map[data.dayOfWeek] = {}
          }
          map[data.dayOfWeek][data.timeStart] =
            data.timeEnd - data.timeStart + 1
        }
        this.activedMap = map;
      },
      update() {
        /*形如：
      datas:[
				{"dayOfWeek":1,"timeStart":1,"timeEnd":2,"value":"张三(A) (10101)(单周null-null)"},
				{"dayOfWeek":1,"timeStart":4,"timeEnd":11,"value":"张三(A),李四(B) (10101),(10102)(连续1-9)"}
			],
       */
        let datas = []
        const pushData = (dayOfWeek, timeStart, data, newTimeEnd)=>{
          let prevData = datas[dayOfWeek- 1][timeStart - 1]
            // 单条数据
          if (!prevData) {
            // newTimeEnd有值，说明span有调整，保证旧的排课数据也能保存
            if (newTimeEnd) {
              datas[dayOfWeek - 1][newTimeEnd - 1] = data;
            } else {
              datas[dayOfWeek - 1][timeStart - 1] = data
            }
          } else {
            // 多条数据
            if (prevData instanceof Array) {
              // 去重，同个教学班相同时间的排课 暂不需要了 数据已经处理过啦
              // if (prevData.filter(a=>a.teachingClassId==data.teachingClassId).length==0){
              // }
              prevData.push(data)
            } else {
              // 如果原来是单条数据 则把上一条和这条数据一起放入新的数组中
              datas[dayOfWeek - 1][timeStart - 1] = [
                prevData,
                data,
              ]
            }
          }
        }
        let times = this.times
        for (let day = 0; day < 7; day++) {
          datas[day] = []
        }
        let classData = this.classData
        // 外边传来的值会在这边进行转换才能显示
        if (this.showConflict){ // 需要检查冲突时，内容有所不同
          for (let i = 0; i < classData.length; i++) {
            const lesson = classData[i];
            const courseCode =  lesson.courseCode;
            let span = lesson.timeEnd - lesson.timeStart + 1;
            let data = {
              value: lesson.value,
              popover: lesson.popover,
              weekState: lesson.weekState,
              code: this.getCodeName(lesson.code),
              span: 1,
              courseCode,
              tag: ""
            };
            let value = "";
            if(data.value){
              value = data.value.replace(/<\/?.+?\/?>/g,'')
            }
            data.str = `[${lesson.timeStart}-${lesson.timeEnd}节] ${value}`;
            for (let i = 0; i < span; i++) {
              pushData(lesson.dayOfWeek,lesson.timeStart+i,data);
            }
          }
        } else {
          /**
           * 修改排课表：
           *  当已排课节数，大于当前排课模式selectSpan("单节","双节","三节"等) ，
           *  且timeStart（开始课时）与已有的排课重叠，则需要调整span(列表cell)的值，
           *  解决无法选中列表块，进行排课的情况
           */
          let dataset = JSON.parse(JSON.stringify(classData)); // 复制排课数据，便于比较开始课时重叠的数据
          let needChangeList = []; // 需要调整span的数组
          for (let k = 0; k< dataset.length; k++) {
            const outItem = dataset[k];
            for(let j = k + 1; j< classData.length; j++) {
                const innerItem = classData[j];
                // 同一周，开始课时(timeStart)一致，结束课时(timeEnd)不一致，需调整结束课时大的数据的span值
                if (outItem.dayOfWeek === innerItem.dayOfWeek && !innerItem.weekState && outItem.timeStart === innerItem.timeStart) {
                  needChangeList.push({
                    newSpan: Math.abs(outItem.timeEnd - innerItem.timeEnd), // 新的span大小
                    oldIndex: k, // 需要改变span的位置
                    newTimeEnd: innerItem.timeEnd + 1
                  });
                  break;
                }
            }
          }
          for (let i = 0; i < classData.length; i++) {
            const lesson = classData[i]
            let span = lesson.timeEnd - lesson.timeStart + 1
            // 开始课时(timeStart)重叠时，span值需要调整
            this._timeEnd = 0;
            for (let m = 0; m < needChangeList.length; m++) {
              const needItem = needChangeList[m];
              if (needItem.oldIndex === i) {
                span = needItem.newSpan;
                this._timeEnd = needItem.newTimeEnd;
                break;
              }
            }
            let data = {
              value: lesson.value,
              popover: lesson.popover,
              weekState: lesson.weekState,
              code: this.getCodeName(lesson.code),
              span,
              bg1: lesson.legends && lesson.legends.includes('bg1'),
              bg2: lesson.legends && lesson.legends.includes('bg2'),
              bg3: lesson.legends && lesson.legends.includes('bg3'),
              c1: lesson.legends && lesson.legends.includes('c1'),
              'c1-1': lesson.legends && lesson.legends.includes('c1-1'),
              c2: lesson.legends && lesson.legends.includes('c2'),
              c3: lesson.legends && lesson.legends.includes('c3'),
              c4: lesson.legends && lesson.legends.includes('c4'),
            };
            let legend = this.legend;
            let value = "";
            if(data.value){
              value = data.value.replace(/<\/?.+?\/?>/g,'')
            }
            data.str = `[${lesson.timeStart}-${lesson.timeEnd}节] ${value}`;
            if (legend){
              data.tag =
                `${data.c1 ? legend['c1'] + '|' : ''}
                ${data['c1-1'] ? legend['c1-1'] + '|' : ''}
                ${data.c2 ? legend['c2'] + '|' : ''}
                ${data.c3 ? legend['c3'] + '|' : ''}
                ${data.c4 ? legend['c4'] + '|' : ''}`
                +
                `${data.bg1 ? legend['bg1'] + '|' : ''}
                ${data.bg2 ? legend['bg2'] + '|' : ''}
                ${data.bg3 ? legend['bg3'] + '|' : ''}`
            }else{
              data.tag = ""
            }
            pushData(lesson.dayOfWeek,lesson.timeStart,data, this._timeEnd);
          }
        }
        // 多门课程按课程名排序
        // console.log('data',datas);
        for(let i=0;i<datas.length;i++){
          for(let j=0;j<datas[i].length;j++){
            const data = datas[i][j];
            if (data instanceof Array){
              data.sort((a,b)=>a.str.localeCompare(b.str));
              // console.log('showConflict',this.showConflict);
              if (this.showConflict){
                if (this.checkWeekState(data)){
                  datas[i][j].weekConflict = true;
                }
              }
            }
          }
        }
        this.datas = datas
        // console.log("update结果datas：", datas);
      },
      // 研究生排课，需要显示课程班号
      getCodeName(code){
        let codeName = "";
        if (code) {
          if (this.pageName === 'ARRANGE') {
            codeName = '[' + '教学班' + '(' + code + ')' + ']' + '' ;
          } else if (this.pageName === 'GRADUATE_ARRANGE') {
            codeName = '[' + code + ']' + ' ' ;
          }
        }
        return codeName;
      },
      // 检查占用时段是否有冲突
      checkWeekState(arr){
        let occupation = 0;
        let courseCodeSet = new Set();
        for (let i = 0; i < arr.length; i++) {
          const weekState = arr[i].weekState; // weekState 是周信息的二进制值，通过位运算来比较
          const courseCode =  arr[i].courseCode;
          // 同一个课程号不检查冲突
          if (courseCode){
            if (courseCodeSet.has(courseCode)){
              continue;
            } else {
              courseCodeSet.add(courseCode);
            }
          }
          if (weekState > 0){
            if ((occupation & weekState)>0){
              return true;
            }
            occupation |= weekState;
          }
        }
        return false;
      },
      cellClick(dayOfWeek, time, type ,disable, event) { // type 0 单击 1 右击 2 双击
        const className = event.target.className;
        // 如果不是最上方的图层（class==active selected saved），则根据鼠标点击位置调整时段选择
        if (!className || this.checkData(className)){
          // 当点击到上部边缘时有时会出现offsetY==-1的情况，导致调整后的time==0
          time = (Math.floor(event.offsetY/cellHeight)+ time)||1;
        }
        if (this.disableTime.indexOf(time)>=0){ // 如果是disable时段则不提交事件
          return;
        }
        // console.log("调整后time:",time);
        this.$emit('cell-click', dayOfWeek, time, type)
      },
      cellHover(dayOfWeek, time, type ,disable){
        // console.log('cell-hover',dayOfWeek, time, type)
        if(!disable){
          this.$emit('cell-hover', dayOfWeek, time, type)
        }
      },
      checkData(className) {
        let temp = ["active","selected","saved",'tempSava']
        let classNames = className.split(' ')
        for(let i = 0; i<classNames.length; i++) {
          if(temp.includes(classNames[i])) {
            return false
          }
        }
        return true
      }
    },
  }
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 1px !important;
  height: 10px !important;
}
.edu-timetable {
  table {
    border: solid 3px #9c9c9c;
    background-color: #f0f2f5;
    border-collapse: collapse;
    color: #454545;
    width: 100%;
    text-align: center;
    td {
      color: #333;
      padding: 0;
      border: solid 1px #9c9c9c;
      border-top: none;
      width: 100px;
      cursor: default;
      position: relative;
      height: 35px;
      span {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 5px;
        width: 100%;
      }
      .active {
        text-align: left;
        font-weight: 600;
        padding: 0 3px!important;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 3px #E6A23C;
        background: repeating-linear-gradient(
          45deg,
          rgba(64, 158, 255, 0.15) 0,
          rgba(64, 158, 255, 0.15) 15px,
          rgba(255, 255, 255, 0.1) 0,
          rgba(255, 255, 255, 0.1) 30px
        );
        // background: rgba(103, 194, 58, 0.15);

        z-index: 11;
        width: 100%;
      }
      .saved {
        text-align: left;
        font-weight: 600;
        padding: 0 3px!important;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 2px #409EFF;
        background: rgba(64, 158, 255, 0.15);
        z-index: 10;
        width: 100%;
      }
      .selected {
        text-align: left;
        font-weight: 600;
        padding: 0 3px!important;
        position: absolute;
        top: 0;
        left: 0;
        border: dashed 2px #F56C6C;
        background: rgba(64, 158, 255, 0.15);
        z-index: 10;
        width: 100%;
      }
      .content {
        z-index: 4;
        color: #000000;
        font-size: 12px;
        position: absolute;
        top: -1px;
        left: 0;
        overflow: hidden;
        border-top: solid 1px #9c9c9c;
        border-bottom: solid 1px #9c9c9c;
        // background: #e0e0e0;
        background: #E4E7ED;
        width: 100%;
      }
      .titleSave {
        font-size: 12px;
        position: absolute;
        top: -1px;
        left: 0;
        overflow: auto;
        border: solid 2px #409EFF;
        // background: rgba(64, 158, 255, 0.15);
        z-index: 11 ;
        width: 100%;
      }
      .content:hover {
        // border: 2px solid red;
        // z-index: 5;
        // overflow: auto;
        border: solid #67C23A 2px;
      }
      .content-title :hover {
        // 样式分开避免鼠标悬浮时闪动
        z-index: 5;
        overflow: auto;
      }
    }
    td.td-head{
      border-bottom: solid 2px #9c9c9c;
    }
    td.top {
      border-bottom: solid 1px #9c9c9c;
      border-top: none;
    }
    td.top1 {
      border-bottom: dashed 1px #9c9c9c;
      border-top: none;
    }
    td.bottom {
      border: solid 1px #9c9c9c;
      border-bottom: solid 2px #9c9c9c;
      border-top: none;
    }
    td.bottom1 {
      border: solid 1px #9c9c9c;
      border-top: none;
    }
    td.disable {
      background: #e0e0e0;
      cursor: not-allowed;
    }
    td.split {
      border-bottom: solid 4px #9c9c9c;
      border-top: none;
    }
    td.split1 {
      border-bottom: solid 2px #9c9c9c;
      border-top: none;
    }
  }
  .corner-1 {
    z-index: 99;
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border-top: 8px solid #7057d2;
    // border-top: 8px solid #3A7FE8;
    border-right: 8px solid transparent;
  }
  .corner-1-1 {
    z-index: 99;
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    // border-top: 8px solid #00B3B5;
    border-top: 8px solid #FF7800;
    border-right: 8px solid transparent;
  }
  .corner-2 {
    z-index: 99;
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    border-top: 8px solid rgb(0, 0, 128);
    border-left: 8px solid transparent;
  }
  .corner-3 {
    z-index: 99;
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    left: 0;
    border-bottom: 8px solid rgb(0, 0, 128);
    border-right: 8px solid transparent;
  }

  .corner-4 {
    z-index: 99;
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    right: 0;
    border-bottom: 8px solid red;
    border-left: 8px solid transparent;
  }
  .bg-1 {
    background: #c3f5ac !important;
    // background: #e0e0e0 !important;
  }
  .bg-2 {
    background: rgb(255, 208, 208) !important;
    // background: rgba(255,192,203,0.6) !important;
    // background: #E7B9B7 !important; // 需求文档中的颜色 太深了
  }
  .bg-3 {
    background: #F8F97A!important;
  }
  .bg-multi {
    background: repeating-linear-gradient(
      135deg,
      #e0e0e0 0,
      #e0e0e0 15px,
      #f0f2f5 0,
      #f0f2f5 30px
    ) !important;
  }
  .legend {
    span {
      margin: auto 5px;
    }
    .legend-c {
      position: relative;
      padding-left: 15px;
      color: #454545;
    }
    .legend-bg {
      color: #454545;
    }
  }
}
</style>
